<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对定位与绝对定位</title>
		<style>
			/* 相对定位 box2照片压到box1图片上 */
			div.box1{
				width: 250px;
				height: 250px;
				background: url(img/3.jpg);
				background-size: 100%;
				
				/* 声明一个相对定位与方向属性 */
				position: absolute;
				left: 230px;
				top: 40px;
				/* 堆叠 z-index  针对所有的position定位 */
				z-index: 2;
			}
			div.box2{
				width: 250px;
				height: 250px;
				background: url(img/2.gif);
				background-size: 100%;
			
				/* 声明一个相对定位与方向属性 */
				position: absolute;
				left: 259px;
				top: -183px;
				z-index: 3;
			}
		</style>
	</head>
	<body>
		<!-- 定位：相对定位  相对与父级元素定位 
		           功能:单一元素定位  元素在正常文档流中 推荐
				position属性  relative 声明元素可以用相对定位意义
				          方向属性 left right top bottom
						  堆叠顺序属性：z-index
						    属性值数值： 数值越大 越靠前
						绝对定位：定位时按照祖先【页面左上角】进行定位
						功能：脱离文档流 不占原来空间
						方向属性和叠加属性和相对定位以及固定定位共用！
						position属性 absolute声明文员可以使用绝对定位
						
						实际开发中   相对定位结合绝对定位一起使用
						           侧边栏 左栏 【挂靠】
						案例： 左栏溢出【html结构 语义化标签+css两种定位+js】
		-->
		<div class="box1"></div>
		<div class="box2"></div>
	</body>
</html>